<template>
  <div class="home-container">
    <el-row class="custom" :gutter="10">
      <el-col :xs="12" :sm="8" :lg="4">
        <el-card style="margin-bottom: 10px">
          <div class="grid-content">
            <div class="left" style="background: #5470c6">
              <el-icon style="font-size: 24px; color: white"><House /></el-icon>
            </div>
            <div class="right">
              <div class="h2" style="color: #5470c6">
                <count-to
                  :start-val="0"
                  :end-val="info.departmentNum"
                  :duration="200"
                  :autoplay="true"
                  v-if="info && info.departmentNum"
                ></count-to>
                <span v-else>0</span>
              </div>
              <div>科室数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="8" :lg="4" v-if="info && info.platformNum != -1">
        <el-card style="margin-bottom: 10px">
          <div class="grid-content">
            <div class="left" style="background: #91cc75">
              <el-icon style="font-size: 24px; color: white"><House /></el-icon>
            </div>
            <div class="right">
              <div class="h2" style="color: #91cc75">
                <count-to
                  :start-val="0"
                  :end-val="info.roomNum"
                  :duration="200"
                  :autoplay="true"
                  v-if="info.roomNum"
                ></count-to>
                <span v-else>0</span>
              </div>
              <div>房间数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="8" :lg="4">
        <el-card style="margin-bottom: 10px">
          <div class="grid-content">
            <div class="left" style="background: #fac858">
              <el-icon style="font-size: 24px; color: white"><Odometer /></el-icon>
            </div>
            <div class="right">
              <div class="h2" style="color: #fac858">
                <count-to
                  :start-val="0"
                  :end-val="info.equipmentNum"
                  :duration="200"
                  :autoplay="true"
                  v-if="info && info.equipmentNum"
                ></count-to>
                <span v-else>0</span>
              </div>
              <div>设备数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="8" :lg="4">
        <el-card style="margin-bottom: 10px">
          <div class="grid-content">
            <div class="left" style="background: #73c0de">
              <el-icon style="font-size: 24px; color: white"><CircleCheck /></el-icon>
            </div>
            <div class="right">
              <div class="h2" style="color: #73c0de">
                <count-to
                  :start-val="0"
                  :end-val="info.online"
                  :duration="200"
                  :autoplay="true"
                  v-if="info && info.online"
                ></count-to>
                <span v-else>0</span>
              </div>
              <div>设备在线数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="8" :lg="4">
        <el-card style="margin-bottom: 10px">
          <div class="grid-content">
            <div class="left" style="background: #ee6666">
              <el-icon style="font-size: 24px; color: white"><Warning /></el-icon>
            </div>
            <div class="right">
              <div class="h2" style="color: #ee6666">
                <count-to
                  :start-val="0"
                  :end-val="info.offline"
                  :duration="200"
                  :autoplay="true"
                  v-if="info && info.offline"
                ></count-to>
                <span v-else>0</span>
              </div>
              <div>设备离线数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="8" :lg="4">
        <el-card style="margin-bottom: 10px">
          <div class="grid-content">
            <div class="left" style="background: #3ba272">
              <el-icon style="font-size: 24px; color: white"><Opportunity /></el-icon>
            </div>
            <div class="right">
              <div class="h2" style="color: #3ba272">
                <count-to
                  :start-val="0"
                  :end-val="info.open"
                  :duration="200"
                  :autoplay="true"
                  v-if="info && info.open"
                ></count-to>
                <span v-else>0</span>
              </div>
              <div>设备开启数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :lg="16">
        <!-- <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>统计</span>
              <div>
                <el-date-picker
                  style="width: 240px"
                  v-model="date"
                  :shortcuts="shortcuts"
                  type="daterange"
                  :editable="false"
                  :clearable="false"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="dateChange"
                />
              </div>
            </div>
          </template>
          <div>
            <ChartLine ref="chartLineRef" width="100%" height="54vh"></ChartLine>
          </div>
        </el-card> -->
      </el-col>

      <el-col :xs="24" :sm="12" :lg="12">
        <el-card class="box-table" header="设备七日运行时长">
          <label>选择设备 </label>
          <el-select
            v-model="echartsid"
            multiple
            :multiple-limit="10"
            filterable
            allow-create
            default-first-option
            placeholder=""
            @change="getEcharts"
          >
            <el-option
              v-for="(item, index) in eList"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <div ref="main" id="main" style="width: 100%; min-height: 500px; background: #fff"></div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12">
        <el-card class="box-table" header="日志">
          <TableCom></TableCom>
        </el-card>
        <!-- <el-tabs class="box-table" stretch v-model="activeName">
          <el-tab-pane label="日志" :name="1">
            <TableCom></TableCom>
          </el-tab-pane>
          <el-tab-pane label="Config" :name="2"></el-tab-pane>
          <el-tab-pane label="Role" :name="3"></el-tab-pane>
        </el-tabs> -->
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
  import { welcome, getechartsByid, equipmentSelected } from '@/api/admin'
  import { nextTick, onMounted, ref } from 'vue'
  import CountTo from '@/components/CountTo/index.vue'
  import ChartLine from './components/ChartLine.vue'
  import TableCom from './components/TableCom.vue'
  import * as echarts from 'echarts'
  const chartoption = ref()
  // onMounted(
  //   () => {
  //     init()
  //   }
  // )
  function init() {
    let myChart = echarts.init(document.getElementById('main'))
    let option = {
      // title: {
      //   text: '设备七日运行时长'
      // },
      tooltip: {},
      legend: {
        data: chartoption.value.legend,
        left: '15%',
        padding: 20,
        type: 'scroll',
        orient: 'horizontal',
      },
      xAxis: {
        name: '日期',
        data: chartoption.value.day,
        boundaryGap: false,
      },
      yAxis: { name: '时长/时' },
      series: chartoption.value.data,
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.clear()
    myChart.setOption(option)
  }
  const eList = ref()
  const chartLineRef = ref()
  const shortcuts = [
    {
      text: '最近整周',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        return [start, end]
      },
    },
    {
      text: '最近一个月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        return [start, end]
      },
    },
    {
      text: '最近三个月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        return [start, end]
      },
    },
  ]
  const date = ref()
  const activeName = ref(1)
  const info = ref()
  const echartsid = ref()
  // const dateChange = (val) => {
  //   chartLineRef.value.initChart(val)
  // }
  const getWelcome = () => {
    welcome({}).then((res) => {
      if (res.code == 200) {
        info.value = res.data
      }
    })
    equipmentSelected({}).then((res) => {
      if (res.code == 200) {
        eList.value = res.data.list
        echartsid.value = res.data.id ? [res.data.id] : null
      }
    })
  }
  const getEcharts = () => {
    chartoption.value = null
    getechartsByid({ equipment_id: echartsid.value }).then((res) => {
      if (res.code == 200) {
        chartoption.value = res.data
        init()
      }
    })
  }
  getWelcome()
  getEcharts()

  // onMounted(() => {
  //   nextTick(() => {
  //     chartLineRef.value.initChart()
  //   })
  // })
</script>

<style scoped lang="scss">
  @import './index';
</style>
